<template>
  <div>
    <!-- v-loading="loading"
    :element-loading-background="
      themeType === 'night' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)'
    " -->
    <!-- <div class="text-left quotet1 text-14 text-bold mb-23">
      {{ $t("lever.openlever") }}
    </div>
    <div class="text-left mb-23">
      <i class="el-icon-warning-outline personlink"></i>
      <span class="text-12 personlink">{{ $t("lever.import") }}</span>
    </div>
    <div class="text-14 text-box mb-12 quotet1 text-left">
      {{ $t("lever.opentip") }}
    </div> -->
    <div class="mb-30 text-left text-14 mt-30" v-if="user_protocol">
      <!-- <input
        id="agree"
        v-model="state.isCheck"
        @click="state.isCheck = !state.isCheck"
        type="checkbox"
      /> -->
      <el-checkbox v-model="state.isCheck">
        {{ $t("register.readAndAgree") }}
        <router-link class="text-login" to="/agreement?name=user_protocol"
          >{{ state.appName }}{{ $t("footer.userProtocol") }}</router-link
        >
      </el-checkbox>
    </div>
    <div class="mb-20">
      <el-button
        style="width:100%;height:46px"
        type="primary"
        @click="open"
        :disabled="user_protocol && !state.isCheck"
        class="login-btn"
        >{{ $t("lever.openlever") }}</el-button
      >
    </div>
    <!-- <div class="open-btn share-color acbtn radius text-12 point" @click="open">
      {{ $t("lever.opennow") }}
    </div> -->
  </div>
</template>

<script>
import { openLever } from "@/api/currency";
import { demoopenLever } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { getProtocol } from "@/api/article";
import { ref, computed, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import useProtocolSetting from "@/commonapi/useProtocolSetting";
export default {
  emits: ["openlever"],
  setup(props, { emit }) {
    const $store = useStore();
    const loading = ref(false);
    const state = reactive({
      content: {},
      isCheck: false,
      appName: window.VUE_APP_NAME,
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const open = () => {
      loading.value = true;
      let setFun = virtual_wallet.value ? demoopenLever : openLever;
      setFun()
        .then((res) => {
          loading.value = false;
          if (res.code === 200) {
            ElMessage({
              type: "success",
              message: res.message,
            });
            let obj = $store.state.user.userInfo;
            obj.user_lever_status = true;
            $store.commit("user/SET_USER_INFO", obj);
            emit("openlever");
          }
        })
        .catch(() => {
          loading.value = false;
        });
    };
    const themeType = computed(() => $store.state.exchange.theme);
    // 获取协议状态
    const { user_protocol } = useProtocolSetting();
    const getOpenContract = () => {
      const data = {
        protocol_type_tag: "open_contract_trading",
      };
      getProtocol(data).then((res) => {
        state.content = res.data;
      });
    };
    onMounted(() => {
      // getOpenContract();
    });
    return {
      open,
      loading,
      themeType,
      getOpenContract,
      state,
      user_protocol,
    };
  },
};
</script>

<style lang="less" scoped>
.mb-23 {
  margin-bottom: 23px;
}
.mb-12 {
  margin-bottom: 12px;
}
.text-box {
  line-height: 19.6px;
  letter-spacing: 2px;
}
.open-btn {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mt-30 {
  margin-top: 30px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: @blue;
  border-color: @blue;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: @font_42;
}
</style>
